<template>
  <view class="content">
    <view class="home-top">
      <view class="home-top-left">
        <image src="@/static/image/home-logo.png" mode="widthFix"></image>
        <text>AI趣味表情包</text>
      </view>
      <view class="home-top-right">
        <image src="@/static/image/default-profile.png" mode="widthFix"></image>
        <view>创作数{{ createCount }}个</view>
      </view>
    </view>
    <view class="text-area"> </view>
    <up-tabbar
      :value="currentTabbar"
      @change="(name: string) => (currentTabbar = name)"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <up-tabbar-item name="home" text="首页" icon="home"></up-tabbar-item>
      <up-tabbar-item
        name="hot"
        text="热门风格推荐"
        icon="photo"
      ></up-tabbar-item>
      <up-tabbar-item name="my" text="我的" icon="account"></up-tabbar-item>
    </up-tabbar>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const currentTabbar = ref("home");
const createCount = ref(0);
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: -1; /* 置于内容层下方 */
  background: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 50%,
    #a855f7 100%
  ); /* 蓝紫渐变 */
  /* 优化视觉效果的附加属性 */
  background-size: 200% 200%; /* 扩大渐变范围 */
  animation: gradientMove 15s ease infinite; /* 渐变动画 */
}
.home-top {
  width: 100vw;
  height: 20vh;
  position: relative;
  padding: 40rpx;
  .home-top-left {
    position: absolute;
    left: 40rpx;
    top: 40rpx;
    width: calc(100vw - 240rpx);
    display: flex;
    align-items: center;
    image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 40rpx;
    }
    text {
      height: 160rpx;
      display: flex;
      align-items: center;
      font-size: 36rpx;
      color: #fff;
      font-weight: bold;
      margin-left: 20rpx;
    }
  }
  .home-top-right {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
    }
  }
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
